import { useState } from 'react';
import { useWaterIntake, PRESET_WATER_TYPES } from '@/contexts/WaterIntakeContext';
import { cn } from '@/lib/utils';

export const RecordWaterModal = () => {
  const { showRecordModal, setShowRecordModal, addRecord } = useWaterIntake();
  const [amount, setAmount] = useState<string>('');
  const [selectedType, setSelectedType] = useState<string>('白开水');

  // 处理预设选项点击
  const handlePresetClick = (presetAmount: number, presetType: string) => {
    setAmount(presetAmount.toString());
    setSelectedType(presetType);
    // 聚焦到输入框，方便用户修改
    setTimeout(() => {
      const input = document.getElementById('water-amount-input');
      input?.focus();
    }, 100);
  };

  // 处理表单提交
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const parsedAmount = parseInt(amount, 10);
    
    if (isNaN(parsedAmount) || parsedAmount <= 0) {
      alert('请输入有效的水量');
      return;
    }
    
    addRecord(parsedAmount, selectedType);
    setAmount('');
    setSelectedType('白开水');
  };

  if (!showRecordModal) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl w-full max-w-md mx-auto overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-300">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold text-gray-800">记录喝水量</h2>
            <button 
              onClick={() => setShowRecordModal(false)}
              className="text-gray-400 hover:text-gray-600 transition-colors"
            >
              <i class="fa-solid fa-times"></i>
            </button>
          </div>
          
          <form onSubmit={handleSubmit}>
            <div className="mb-8">
              <label className="block text-sm font-medium text-gray-700 mb-2">水量 (ml)</label>
              <div className="relative">
                <input
                  id="water-amount-input"
                  type="number"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  min="1"
                  placeholder="输入水量"
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-lg"
                  required
                />
                <span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">ml</span>
              </div>
            </div>
            
            <div className="mb-8">
              <label className="block text-sm font-medium text-gray-700 mb-3">快速选择</label>
              <div className="grid grid-cols-3 gap-3">
                {PRESET_WATER_TYPES.map((preset) => (
                  <button
                    key={preset.name}
                    type="button"
                    onClick={() => handlePresetClick(preset.amount, preset.name)}
                    className={cn(
                      "py-3 px-2 rounded-xl border transition-all",
                      selectedType === preset.name && amount === preset.amount.toString()
                        ? "border-blue-500 bg-blue-50 text-blue-600 font-medium"
                        : "border-gray-200 hover:border-blue-300 hover:bg-gray-50"
                    )}
                  >
                    <div className="text-center">
                      <div className="font-medium">{preset.name}</div>
                      <div className="text-sm text-gray-500">{preset.amount}ml</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
            
            <button
              type="submit"
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-xl transition-colors duration-300 flex items-center justify-center"
            >
              <i class="fa-solid fa-plus-circle mr-2"></i>
              记录
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};